<template>
  <div class="kpi-info card-item">
    <div v-for="(item, index) in props.itemList"
         :key="index" class="kpi-item"
         @click="editClick(item)">
      <span>{{ item.patientName }}</span>
      <span>{{ item.project }}</span>
      <span class="price">{{ item.price }} 元</span>
    </div>

    <el-divider />
    <span class="total">总计: {{ totalPrice }} 元</span>
  </div>
</template>

<script setup lang="ts">
import { PropType, defineProps, computed } from 'vue'
import { isMobile } from 'vue3-common/utils/layoutUtil'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { useKpiStore } from '@/store/kpi.ts'
import { useAppStore } from '@/store/app.ts'
import { useRouter } from 'vue-router'
import { IKpi } from '@/types/kpi.ts'

const props = defineProps({
  itemList: {
    required: true,
    type: Object as PropType<IKpi[]>
  }
})

const kpiStore = useKpiStore()
const appStore = useAppStore()
const router = useRouter()

const totalPrice = computed(() => {
  return props.itemList.reduce((acc, item) => acc + item.price, 0)
})

const editClick = async (kpi: IKpi) => {
  const { id } = kpi
  kpiStore.kpiApiType = 'UPDATE'
  kpiStore.currentKpi = kpi

  if (isMobile()) {
    appStore.isShowMobileBack = true
    await router.push({ name: 'KpiDetailId', params: { id } })
  } else {
    kpiStore.kpiDialog = {
      title: '编辑绩效',
      visible: true,
      data: deepCopyObject(kpiStore.currentKpi)
    }
  }
}
</script>

<style lang="scss">
.kpi-info {
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 5px;

  .kpi-item {
    padding: 10px;
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    align-items: center;
    gap: 5px;

    .price {
      justify-self: right;
    }
  }

  .el-divider {
    margin: 5px 0;
  }

  .total {
    padding: 10px;
    align-self: flex-end;
    font-weight: bold;
  }
}
</style>
